<template>
        <div class="contentItemLeft" :style="theme">
            <img :src="props.cover" />
            <span   v-if="props.duration && !props.progress">{{ voideoAllTime(props.duration) }}</span>
            <span   v-else-if="props.progress">{{ videoSpeedTime(props.progress,props.duration) }}</span>
            <span   v-else-if="props.badge === '未开播' || props.badge === '直播中'" 
                    :style="props.badge === '直播中'?'top: 10px;background-color: #fd79a8;':'top: 10px;'"
                    >
                    {{ props.badge }}
            </span>
            <span   class="progressLine" 
                    v-if="props.progress" 
                    :style="getProgressWidth(props.progress,props.duration)"
                    >
            </span>
        </div>
        <div class="contentItemRight" :style="theme">
            <span>{{ props.title }}</span>
            <span>
                <div v-if="props.view_at">
                    <img v-if="props.dt === 2" src="../../../assets/videoCardIcon/PC.png"  class="imgIcon" />
                    <img v-else src="../../../assets/videoCardIcon/phone.png" class="imgIcon" />
                    <span>{{ NowBetwDate(props.view_at) }}</span>
                </div>
                <div>
                    <img src="../../../assets/videoCardIcon/UP.png" class="imgIcon" />
                    <span>{{ props.name }}</span>
                </div>
            </span>
            
        </div>
</template>

<script lang="ts" setup>
import { ref, computed, Ref } from 'vue';
import { voideoAllTime,NowBetwDate,videoSpeedTime } from '../../../utils/format'
import { getThemes,resType } from '@/hooks/theme'
import { useRouter } from 'vue-router'

//传入数据接口
interface Props {
    cover:string,       //展示图片
    duration?:number | 0,     //时长
    title:string,       //标题
    badge?:string,       //直播时是否开播
    name?:string,        //作者
    device?:number,      //观看设备
    view_at?:number,     //观看时间
    progress?:number,    //看了多久
    dt?:number,  
}

const props = defineProps<Props>()
const router = useRouter()
let theme: Ref<resType> = ref(getThemes(router.currentRoute.value.name as string))

const getProgressWidth = computed(() => (val1:number,val2:number) => {
    if (val1 === -1) val1 = val2
    return {
        '--mylength': Math.floor( val1 / val2 * 100 ) + '%'
    }
})

</script>

<style lang="scss" scoped>
$sysPopoverBackground: var(--backgroundColor);
$sysPopoverLableColor: var(--lableColor);
$sysPopoverTitleColor: var(--titleColor);
$sysPopoverHoverLableColor: var(--hoverLableColor);
.contentItemLeft{
    width: 40%;
    height: 84px;
    position: relative;
    margin: 0 5px;
    box-sizing: border-box;
    padding: 7px 0;
    display: flex;
    & img{
        display: block;
        object-fit: cover;
        width: 100%;
        border-radius: 4px;
    }
    & span:nth-child(2){
        position: absolute;
        display: flex;
        align-items: center;
        height: 15px;
        transform: scale(0.9);
        padding: 3px 8px;
        background-color: rgba(0,0,0,0.4);
        border-radius:4px ;
        bottom: 10px;
        right: 5px;
        font-size: 12px;
        color: white;
    }
}
.contentItemRight{
    width: 60%;
    height: 84px;
    display: flex;
    margin: 0 5px;
    padding: 7px 0;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: space-between;
    & span:nth-child(1){
        @include tweLineShow;
        color: $sysPopoverTitleColor;
    }
    & span:nth-child(2){
        display: flex;
        flex-direction: column;
        color: $sysPopoverLableColor;
        font-size:12px;
    }
    & span:nth-child(2) div{
        display: flex;
        align-items: center;
    }
}
.progressLine{
    position: absolute;
    width: 100%;
    height: 3%;
    background-color: rgb(0, 0, 0,0.6);
    bottom: 7px;
    z-index: 9;
    &::before{
        content: "";
        position: absolute;
        height: 100%;
        width: var(--mylength);
        background-color: #fd79a8;
        border-radius: 2px;
        z-index: 10;
    }
}
.imgIcon{
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    margin-right: 5px;
}
</style>